<template>
    <div class="target-info">
        <el-row type="flex" align="middle" style="padding:10px 0 20px 0px">
            <span>关联指标</span>
            <el-select class="target-option" size="small" clearable v-model="targetId" placeholder="请选择任务类别" @change="selectTarget">
                    <el-option v-for="item in markList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                  <el-dropdown @command="handleCommand">
                        <el-button type="primary" size="small">
                          更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item command="create">新建指标</el-dropdown-item>
                          <el-dropdown-item command="edit" :disabled="!targetId || !canEditIndex">编辑指标</el-dropdown-item>
                          <el-dropdown-item command="copy" :disabled="!targetId">复制指标</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
          </el-row>
          <RelateTarget ref="targetInfo" :target="targetId" :canSelectUser="canEditIndex" :isPerson="true" :isShow="true" v-on="$listeners"/>
          <el-dialog width="70%" title="新建指标" :visible.sync="dialogCreateVisible">
                <create-target  :padding="0" :isLink="false" @createUp="createUp"/>
            </el-dialog>
          <el-dialog width="70%" title="编辑指标" :visible.sync="dialogEditVisible">
                <edit-target :padding="10" :targetId="editId" :isTask="true"  @createUp="createUp" @editUp="editUp"/>
            </el-dialog>
    </div>
</template>
<script>
    import { getIndexList , updateTaskPart, deleteIndex, createIndex } from '@/api/work.js'
    // import { formatTime } from '@/utils'
    export default {
      name: 'IndexCenter',
      components: {
          'RelateTarget': () => import("./relateTarget"),
          'CreateTarget': () => import("@/views/markSys/indexManager/createIndex/create"),
          'EditTarget': () => import("@/views/markSys/indexManager/createIndex/edit"),
      },
      data() {
        return {
          listLoading: true,
          dialogCreateVisible:false,
          dialogEditVisible:false,
          markList: [],
          targetId: null,
          editId: null,
          createStatus: false,
          selectedIndexObj: null
        }
      },
      props:['initId', 'isEdit'],
      mounted() {
        this.requestMarkList()
        if(this.initId){
          this.targetId = this.initId
        }
      },
      computed: {
        canEditIndex(){
          if(this.selectedIndexObj && this.selectedIndexObj.is_used){
            if(this.initId === this.selectedIndexObj.id || this.createStatus){
              return true
            }
          }else{
            return true
          }
          return false
        }
      },
      methods: {
        // 选择指标下拉列表
        selectTarget(val){
            this.targetId = val
            this.markList.forEach(
              item =>{
                if(item.id === val){
                  this.selectedIndexObj = item
                }
              }
            )
            let userId = this.getUsersList(this.selectedIndexObj.tardetail, [])
            this.$emit('updateUsers', userId)
            this.$emit('setIndexObj', this.selectedIndexObj, this.initId)
        },
        // 选择更多操作命令
        handleCommand(val){
            switch(val){
                case 'create':
                    this.dialogCreateVisible = true
                    break;
                case 'edit':
                    this.dialogEditVisible = true
                    this.editId = this.targetId
                    break;
                case 'copy':
                    this.copyIndex()
                    break;

            }
        },
        // 复制指标
        copyIndex(){
          createIndex(this.selectedIndexObj).then(
            res =>{
              this.createUp() // 刷新指标下拉选项
              this.targetId = res.data.id
              this.selectedIndexObj = res.data
            }
          )
        },
        // 新建指标成功刷新页面数据
        async createUp(data){
          await this.requestMarkList()
          this.dialogCreateVisible = false
          if(data){
            this.targetId = data.id
            this.createStatus = true
            this.selectedIndexObj = data
          }
        },
        // 编辑指标成功刷新页面数据
        editUp(){
            this.$refs.targetInfo.refreshData(this.targetId)
            this.dialogEditVisible = false
        },
        // 遍历所有指标用户
        getUsersList(data, result) {
          data.forEach(item => {
            // result = [...result, ...item.user_department]
            item.detail_user.forEach((user, index) => {
              result.push({
                id: user
              });
            });
            if (item.child && item.child.length > 0) {
              this.getUsersList(item.child, result);
            }
          });
          return result;
        },
        requestMarkList() {
          getIndexList({parent: 'null'}).then(res => {
            this.markList = res.data.results
            this.listLoading = false
            if(this.targetId){
              this.markList.forEach(
                item =>{
                  if(item.id === this.targetId){
                    let userId = this.getUsersList(item.tardetail, [])
                    this.$emit('updateUsers', userId)
                    this.$emit('setIndexObj', item)
                  }
                }
              )
            }
          })
        }
      },
    }
  
  </script>
<style lang="scss">
.target-info{
    margin-bottom: 30px;
    padding: 0 30px;
    .target-option{
        width: 300px;
        margin: 0 10px 0 20px;
    }
}
</style>
